<!-- 课程发布 - 库存价格 -->
<template>
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" :disabled="isDetail">
        <!-- <el-form-item label="课程规格" props="specType">
            <el-radio-group v-model="formData.specType" @change="onChangeSpec" class="w-80">
                <el-radio :label="false">单规格</el-radio>
                <el-radio :label="true">多规格</el-radio>
            </el-radio-group>
        </el-form-item> -->
        <!-- 多规格添加 -->
        <el-form-item v-if="!formData.specType">
            <SkuList ref="skuListRef" :prop-form-data="formData" :property-list="propertyList"
                :rule-config="ruleConfig" />
        </el-form-item>
        <el-form-item v-if="formData.specType" label="课程属性">
            <el-button class="mb-10px mr-15px" @click="attributesAddFormRef.open">添加属性</el-button>
            <ProductAttributes :property-list="propertyList" @success="generateSkus" :is-detail="isDetail" />
        </el-form-item>
        <template v-if="formData.specType && propertyList.length > 0">
            <!-- <el-form-item label="批量设置" v-if="!isDetail">
                <SkuList :is-batch="true" :prop-form-data="formData" :property-list="propertyList" />
            </el-form-item> -->
            <el-form-item label="规格列表">
                <SkuList ref="skuListRef" :prop-form-data="formData" :property-list="propertyList"
                    :rule-config="ruleConfig" :is-detail="isDetail" />
            </el-form-item>
        </template>

        <!-- 课程属性添加 Form 表单 -->
        <ProductPropertyAddForm ref="attributesAddFormRef" :propertyList="propertyList" />
    </el-form>
</template>
<script lang="ts" setup>
import { PropType, nextTick } from 'vue'
import { copyValueToTarget } from '@/utils'
import { propTypes } from '@/utils/propTypes'
import {
    getPropertyList,
    PropertyAndValues,
    RuleConfig,
    SkuList
} from '@/views/mall/product/spu/components/index'
import ProductAttributes from './ProductAttributes.vue'
import ProductPropertyAddForm from './ProductPropertyAddForm.vue'
import type { Spu } from '@/api/mall/product/spu'
import { yuanToFen, fenToYuan } from '@/utils'
import { cloneDeep } from 'lodash-es'

defineOptions({ name: 'ProductSpuSkuForm' })

// sku 相关属性校验规则
const ruleConfig: RuleConfig[] = [
    {
        name: 'stock',
        rule: (arg) => arg >= 0,
        message: '课程库存必须大于等于 1 ！！！'
    },
    {
        name: 'price',
        rule: (arg) => arg >= 0.01,
        message: '课程销售价格必须大于等于 0.01 元！！！'
    },
    // {
    //     name: 'marketPrice',
    //     rule: (arg) => arg >= 0.01,
    //     message: '课程市场价格必须大于等于 0.01 元！！！'
    // },
    // {
    //     name: 'costPrice',
    //     rule: (arg) => arg >= 0.01,
    //     message: '课程成本价格必须大于等于 0.00 元！！！'
    // }
]

const message = useMessage() // 消息弹窗

const props = defineProps({
    propFormData: {
        type: Object as PropType<Spu>,
        default: () => { }
    },
    isDetail: propTypes.bool.def(false) // 是否作为详情组件
})
const attributesAddFormRef = ref() // 添加课程属性表单
const formRef = ref() // 表单 Ref
const propertyList = ref<PropertyAndValues[]>([]) // 课程属性列表
const skuListRef = ref() // 课程属性列表 Ref
const formData = reactive<Spu>({
    specType: false, // 课程规格
    skus: []
})
const rules = reactive({
    // specType: [required],
})

/** 将传进来的值赋值给 formData */
watch(
    () => props.propFormData,
    (data) => {
        if (!data) {
            return
        }
        nextTick(function() {
            /** 默认多规格 */
            data.specType = formData.specType = true;
            onChangeSpec();

            // 将 SKU 的属性，整理成 PropertyAndValues 数组
            propertyList.value = getPropertyList(data)

            copyValueToTarget(formData, data)
        })
    },
    {
        immediate: true
    }
)

/** 表单校验 */
const emit = defineEmits(['update:activeName'])
const validate = async () => {
    if (!formRef) return
    try {
        // 校验 规格
        if (!unref(propertyList).length) {
            throw Error;
            return;
        }
        // 校验 sku
        if (unref(propertyList).length) {
            skuListRef.value.validateSku()
        }
        await unref(formRef).validate()
        // 校验通过更新数据
        Object.assign(props.propFormData, formData)
    } catch (e) {
        message.error('【规格设置】不完善，请填写相关信息')
        emit('update:activeName', 'sku')
        throw e // 目的截断之后的校验
    }
}
defineExpose({ validate })

/** 选择规格 */
const onChangeSpec = () => {
    // 重置课程属性列表
    propertyList.value = []
    // 重置sku列表
    formData.skus = [
        {
            price: 0,
            marketPrice: 0,
            costPrice: 0,
            barCode: '',
            picUrl: '',
            stock: 0,
            weight: 0,
            volume: 0,
            firstBrokeragePrice: 0,
            secondBrokeragePrice: 0
        }
    ]
}

/** 调用 SkuList generateTableData 方法*/
const generateSkus = (propertyList) => {
    skuListRef.value.generateTableData(propertyList)
}
</script>
